<template>
  <div>
    <div style="width: 1150px;margin-left: auto;margin-right: auto;text-align: center;margin-top: 10px;">
      <el-input v-model="userlogquery.username" placeholder="用户姓名" style="width: 200px;float: left;"></el-input>
      <el-input v-model="userlogquery.content" placeholder="事务" style="width: 200px;float: left;margin-left: 15px;"></el-input>
      <el-input v-model="userlogquery.starttime" type="date" placeholder="最早登录时间" style="width: 165px;float: left;margin-left: 15px;"></el-input>
      <el-input v-model="userlogquery.endtime" type="date" placeholder="最晚登录时间" style="width: 165px;float: left;margin-left: 10px;"></el-input>
      <el-button @click="chongzhi" type="infor" style="float: left;margin-left: 10px;">重置</el-button>
      <el-button @click="chaxun" type="primary" style="float: left;">查询</el-button>
      <el-button type="warning" style="float: right;">导出</el-button>
    </div>

    <el-table
      :data="userlogs"
      style="width: 1150px;margin-left: auto;margin-right: auto;text-align: center;">
      <el-table-column
        label="姓名"
        align="center"
        width="180px">
        <template slot-scope="scope">

            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>

        </template>
      </el-table-column>
      <el-table-column
        label="登录IP"
        align="center"
        width="180px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.ipaddr }}</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column
        label="登录地址"
        align="center"
        width="210px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
             {{ scope.row.useraddr }}
            </div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="事务"
        width="400px">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{ scope.row.content }}
            </div>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        label="事务时间"
        width="180px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.time }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="width: 1150px;margin-left: auto;margin-right: auto;">
        <el-pagination
        style="text-align: center;"
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="userlogquery.current"
          :page-sizes="[9, 15, 30, 40]"
          :page-size="userlogquery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="logtotal">
        </el-pagination>
      </div>
  </div>

</template>

<script>
  import usermethod from '@/api/user/user'
  export default {
    data() {
      return {
        userlogquery:{
          current: 1,
          endtime: null,
          limit: 9,
          username: null,
          starttime: null,
          content: null
        },
        userlogs:null,
        // 分页参数
        logtotal: 0,

      }
    },
    created(){
      this.getusers()
    },
    methods: {
      //获取日志数据
      getusers(){
        if(this.userlogquery.username!=null || this.userlogquery.content!=null || this.userlogquery.starttime!=null || this.userlogquery.endtime!=null){
          usermethod.getuserlogsbyquery(this.userlogquery).then(response =>{//待条件
            this.userlogs=response.data.userlogresponse
            usermethod.getuserlonnumc(this.userlogquery).then(res =>{
              this.logtotal=res.data.a
            })
          })

        }else{
          usermethod.getuserlognum().then(response => {
            this.logtotal=response.data.a
          })
          usermethod.getuserlogsbyquery(this.userlogquery).then(response =>{
            this.userlogs=response.data.userlogresponse
          })
        }

      },
    //分页
    handleSizeChange(val) {
            this.userlogquery.limit=val
            this.userlogquery.current=1
            this.getusers()

          },
          handleCurrentChange(val) {
           this.userlogquery.current=val
           this.getusers()
          },
    //重置和查询
    chongzhi(){
      this.userlogquery.content=null
      this.userlogquery.endtime=null
      this.userlogquery.username=null
      this.userlogquery.starttime=null
    },
    chaxun(){
      this.userlogquery.current=1
      this.getusers()
    }
    }
  }
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
